<template>
	<view class="warp bff" style="position: fixed;">
		<view class="home_top"></view>
		<view class="phone box-s3" v-if="cardList.length != 0">
			<view class="cart" v-for="(item,index) in cardList" :key="index">
				<bancart :bankCode="item.abbreviation" :url="item.bank_pic" :bankName="item.bank_name" :cardType="item.type"
					:cardCode="item.bank_code"></bancart>
			</view>
			<view class="footer" @click="addcart">
				<text class="iconfont">&#xe61a;</text>添加银行卡
			</view>
		</view>
		<!-- <view class="phone box-s3" v-for="(item,index) in cardList " :key="index">
			<image src="../../../static/delimg/shoplist.png" class="logo" style="width: 120rpx;height: 120rpx;">
			</image>
			<view class="bank_name">{{item.bank_name}}</view>
			<view class="type">{{item.type}}</view>
			<view class="number">{{dealnumber(item.bank_code) }}</view>
		</view> -->
		<view class="footer" style="margin-top: 20%;" @click="addcart" v-if="cardList.length == 0">
			<text class="iconfont">&#xe61a;</text>添加银行卡
		</view>


	</view>
</template>

<script>
	import bancart from '../../../components/bankcart/index.vue'
	import {
		Withdrawal,
		userBankList,
		getBankType
	} from '../../../api/api.js'
	export default {
		components: {
			bancart
		},
		data() {
			return {
				userInfo: {},
				current: 0,
				typelist: [],
				cardList: []
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.datainit()
			this.getBankType()
		},
		methods: {
			// 获取银行类型
			getBankType() {
				getBankType().then(res => {
					this.typelist = res.data
				})
			},
			// 添加银行卡
			addcart() {
				uni.navigateTo({
					url: '/pages/sf/addcart/index'
				})
			},
			// 初始化获取银行卡列表
			datainit() {
				userBankList().then(res => {
					this.cardList = res.data
				})
			},
			// 处理银行卡
			dealnumber(num) {
				let arr = num.split('')

				arr.forEach((item, index) => {
					// console.log('index', index, item, index < 12)
					if (index < 12) {
						arr[index] = '*'
					}
				})

				let res = arr.toString().replace(/,/g, ' ')
				console.log('arr', res)
				return res
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fafafa !important;
	}




	.home_top {
		position: fixed;
		top: 0;

		/* padding-left: -25px; */
		background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-y: -140rpx;
		width: 750upx;
		height: 270upx;
		padding: 20upx;
		box-sizing: border-box;
		/* background-color: #4cd964; */
		flex-direction: row;
		align-items: center;
	}

	.warp {
		position: relative;


		.phone {
			// position: absolute;
			height: 350rpx;
			background-color: #FFFFFF;
			width: 90%;
			margin-left: 50%;
			transform: translateX(-50%);
			// margin-top: -180rpx;
			margin-top: 30rpx;
			border-radius: 25rpx;
			/* width: 750upx; */
			box-sizing: border-box;

			.logo {
				position: absolute;
				border-radius: 50%;
				top: 40rpx;
				left: 40rpx;
			}

			.bank_name {
				font-size: 40rpx;
				font-weight: 500;
				color: #FFFFFF;
				position: absolute;
				top: 40rpx;
				left: 175rpx;
			}

			.type {
				font-size: 23rpx;
				color: #FFFFFF;
				position: absolute;
				top: 110rpx;
				left: 175rpx;
			}

			.number {
				font-size: 42rpx;
				color: #FFFFFF;
				position: absolute;
				bottom: 44rpx;
				right: 110rpx;
			}
		}

	}

	.footer {
		border: 2rpx dashed #029E8E;
		height: 150rpx;
		width: 90%;
		color: #029E8E;
		margin-top: 50rpx;
		margin-left: 50%;
	background: rgba(229, 245, 243, 0.39);
		transform: translateX(-50%);
		border-radius: 25rpx;
		line-height: 150rpx;
		padding-left: 30rpx;
		// box-shadow: 0 0 5rpx 5rpx #DCEBFF;


	}
</style>
